<template>
  <div class="query-form">
    <!-- 修改文档页面请求输入框 -->
    <el-form :model="form" label-position="top" label-width="80">
      <el-row :gutter="10">
        <el-col :span="18">
          <el-input v-model="form.url" @change="changeForm" placeholder="接口路径，‘/’起始" class="input-with-select">
            <template #prepend>
              <el-select v-model="form.method" @change="changeForm">
                <el-option label="GET" value="GET" />
                <el-option label="POST" value="POST" />
                <el-option label="PUT" value="PUT" />
                <el-option label="DELETE" value="DELETE" />
              </el-select>
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="onSave">保存</el-button>
          <el-button @click="toOperation" type="primary" plain>运行</el-button>
          <el-button @click="toDelete" type="danger" plain>删除</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 2%;" :gutter="10" justify="space-between">
        <el-col :span="12">
          <el-form-item label="接口名称" prop="name">
            <el-input v-model="form.name" @change="changeForm" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" placeholder="" @change="(val) => changeForm(val, 'select')"
              class="select-hidden" clearable>
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
                <div class="flex items-center">
                  <small :style="{ background: item.color + '22', borderColor: item.color }" class="dot"></small>
                  <span :style="{ color: item.color }">{{ item.label }}</span>
                </div>
              </el-option>
              <template #prefix v-if="currentLevel">
                <span :style="{ color: currentLevel?.color }"> <small
                    :style="{ background: currentLevel?.color + '22', borderColor: currentLevel?.color }"
                    class="dot"></small>{{
                      currentLevel?.label }}</span>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="space-between">
        <el-col>
          <el-form-item label="说明" prop="description">
            <el-input v-model="form.description" @change="changeForm">
              <template #suffix>
                <el-icon style="cursor:pointer" @click="openMarkdown">
                  <FullScreen />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <markdownDialog ref="markdownDialogRef" :data="form.description" @markdown-value="handleMarkdownValue" />
</template>

<script setup lang="ts">
import * as DebugApi from '@/api/debug'
import { propTypes } from '@/utils/propTypes'
import { useAppStore } from '@/store/modules/app'
import { FullScreen } from '@element-plus/icons-vue'
import markdownDialog from './markdownDialog.vue'
const appStore = useAppStore()
const projectId = computed(() => appStore.getSelectProject)
const message = useMessage()
const { t } = useI18n() // 国际化
const emit = defineEmits(['save-document', 'to-operation', 'api-form', 'delete-node'])
const props = defineProps({
  data: propTypes.object.def({})
})
let form = ref({} as any)
const currentLevel = ref()
const statusList = [
  {
    color: '#17b26a',
    value: '1',
    label: '已完成'
  }, {
    color: '#ef6820',
    value: '2',
    label: '测试中'
  }, {
    color: '#aaaaaa',
    value: '3',
    label: '将废弃'
  }, {
    color: '#2e90fa',
    value: '4',
    label: '开发中'
  }
]
const toOperation = () => {
  emit('to-operation')
}

const onSave = () => {
  emit('save-document')
}

const toDelete = async () => {
  try {
    // 删除的二次确认
    await message.delConfirm(`确定删除【${props.data.title}】接口？`)
    // 发起删除
    await DebugApi.deleteApiInTree({ id: props.data.id, projectId: projectId.value })
    message.success(t('common.delSuccess'))
    // 更新tab和树数据
    emit('delete-node', props.data)
  } catch (error) {

  } finally {

  }
}
const changeForm = (val, flag) => {
  if (flag) {
    currentLevel.value = statusList.find(l => l.value == val)
  }
  const formValue = {
    ...form.value,
    id: props.data.id
  }
  emit('api-form', formValue)
}
const init = () => {
  if (props.data) {
    form.value.url = props.data.info.url
    form.value.method = props.data.info.requestType
    form.value.name = props.data.title
    form.value.status = props.data.status
    form.value.description = props.data.description
    currentLevel.value = statusList.find(l => l.value == props.data.status)
    const formValue = {
      ...form.value,
      id: props.data.id
    }
    emit('api-form', formValue)
  }
}

const markdownDialogRef = ref()
const openMarkdown = () => {
  markdownDialogRef.value.open()
}
const handleMarkdownValue = (data) => {
  form.value.description = JSON.parse(JSON.stringify(data.value))
  const formValue = {
    ...form.value,
    id: props.data.id
  }
  emit('api-form', formValue)
}

watch(() => props.data, (newVal, oldVal) => {
  if (JSON.stringify(newVal) != JSON.stringify(oldVal)) {
    init()
  }
}, {
  deep: true
})
onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
:deep(.el-input-group__prepend) {
  padding: 0;

  .el-select {
    width: 120px;
    margin: 0;

  }
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  margin-right: 5px;
}

:deep(.select-hidden) {

  .el-select__selection,
  .el-select__selected-item {
    color: transparent;
  }
}
</style>
